<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>artTemplate快速上手</title>
  <script src="template-web.js"></script>
</head>
<body>
  <div id="d"></div>
  <!-- 定义模板字符串，可变数据需要使用{{key}}标记，key就是对象的下标(索引) -->
  <script type="text/template" id="tpl">
    我叫{{name}},今年{{age}}岁,我是一个{{gender}}生
  </script>
  <script>
    //我叫张三，今年25岁，我是一个男生
    var obj = {name: '李四', age: 25, gender: '男'};
    //template()有2个参数
    //参数1：模板字符串标签的id
    //参数2：要显示在模板中的数据
    //返回值：模板字符串和数据组装好的最终结果
    var s = template('tpl',obj);
    document.getElementById('d').innerText = s;
  </script>
</body>
</html>